<template>
	<navbar title="填写报名信息" :isBack="true"></navbar>
	<view class="page">
		<view class="" style="background-color: white;border-radius: 10rpx;padding: 30rpx 30rpx 0 30rpx;">
			<view class="" style="font-size: 32rpx;color: #5062A7;font-weight: bold;">
				个人资料
			</view>
			<view class="" style="padding-left: 20rpx;margin-bottom: 120rpx;">
				<u-form :model="Info" :rules="rules" label-width="220" :label-style="{'font-size':'32rpx'}">
					<u-form-item :label="item.name" prop="name" required v-for="(item,index) in InfoArr" :border-bottom="index == InfoArr.length-1 ? false:true">
						<u-input v-model="item.value" v-if="item.type == 1 || item.type == 2" 
							:custom-style="{'font-size':'32rpx'}" :placeholder="item.placeholder"/>
						<!-- 多选框 -->
						<u-checkbox-group @change="checkboxGroupChange($event,index)" v-if="item.type == 3">
							<u-checkbox v-model="it.value" v-for="(it, itIndex) in item.child" :key="itIndex"
								:name="it.label">{{it.label}}</u-checkbox>
						</u-checkbox-group>
						
						<!-- 下拉框 -->
						<view class="" v-if="item.type == 4">
							<view class="" @click="clickSelect(item,index)"
								style="display: flex;justify-content: space-between;align-items: center;">
								<view class="" v-if="item.value" style="font-size: 32rpx;">
									{{item.value}}
								</view>
								<view v-else style="color: #c0c4cc;font-size: 32rpx;">{{item.placeholder}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						
						</view>
						<!-- <u-radio-group v-model="item.value" @change="radioGroupChange($event,index)"
							v-if="item.type == 4">
							<u-radio v-for="(it, itIndex) in item.child" :key="itIndex" :name="it.label"
								:disabled="it.disabled">
								{{it.label}}
							</u-radio>
						</u-radio-group> -->
						<!-- 日期 -->
						<view class="" v-if="item.type == 5">
							<view class="" @click="clickPicker(index)"
								style="display: flex;justify-content: space-between;align-items: center;">
								<view class="" v-if="item.value" style="font-size: 32rpx;">
									{{item.value}}
								</view>
								<view v-else style="color: #c0c4cc;font-size: 32rpx;">{{item.placeholder}}</view>
								<u-icon name="arrow-right"></u-icon>
							</view>

						</view>
						<!-- 文本域 -->
						<view class="" v-if="item.type == 6">
							<u-input v-model="item.value" type="textarea" :border="true" :height="100"
								:auto-height="true" />
						</view>
						<!-- 上传图片 -->
						<view class="" v-if="item.type == 7">
							<view v-if="!item.value" class="upload-item flex-center" @click="upload(index)">
								<image class="add" src="/static/icon/16.png"></image>
							</view>
							<image v-if="item.value" :src="item.value" style="width: 140rpx;height: 140rpx;"
								mode="aspectFill"></image>
							<!-- <u-upload :action="action" :file-list="fileList" ></u-upload> -->
						</view>
					</u-form-item>

					<!-- 	<u-form-item label="性别" prop="sex" required>
						<u-radio-group @change="radioGroupChange" active-color="#5062A7" width="150rpx">
							<u-radio shape="circle " v-for="(item, index) in sexList" :key="index" :name="item.name">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</u-form-item> -->
					<!-- <u-form-item label="证件类型" prop="name" required>
						<view class="" @click="actionShow = true"
							style="display: flex;justify-content: space-between;align-items: center;">
							<view class="" style="color: #c0c4cc;font-size: 32rpx;">
								请选择证件类型
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<u-action-sheet :list="actionList" v-model="actionShow"></u-action-sheet>
					</u-form-item> -->
					<!-- <u-form-item label="证件号" prop="name" required><u-input :custom-style="{'font-size':'32rpx'}"
							v-model="Info.name" /></u-form-item>
					<u-form-item label="电话号码" prop="name" required :borderBottom="false"><u-input
							:custom-style="{'font-size':'32rpx'}" v-model="Info.name" /></u-form-item> -->
				</u-form>
			</view>
		</view>
	</view>
	<!-- <view class="" style="position: absolute;bottom: 190rpx;display: flex;align-items: center;left: 40rpx;">
		<u-checkbox @change="checkboxChange" v-model="checked" shape="circle" active-color="#5062A7">
			<view class="" style="font-size: 32rpx;">
				我已阅读并同意<span style="color: #5062A7;">《报名须知》</span>
			</view>
		</u-checkbox>
		 

	</view> -->
	<view class="" style="background-color: white;position: fixed;bottom: 0rpx;width: 100%;z-index: 10;">
		<view class="btn">
			<view class="btn-left">
				<view style="font-size: 28rpx;min-width: 30rpx;white-space: nowrap;">应付:</view>
				<view class="" style="">
					<span style="font-size:24rpx;color: #F00505;">￥</span><span style="color: #F00505;">{{price}}</span>
				</view>
			</view>
			<view class="btn-right" @click="submit">
				立即报名
			</view>
		</view>
	</view>
	<view class="">
		<u-picker v-model="pickerShow" :params="pickerParams" mode="time" @confirm="pickerConfirm"></u-picker>
	</view>
	<view class="">
		<u-select v-model="selectShow" :list="selectList" value-name="label" @cancel="selectShow = false" @confirm="selectConfirm"></u-select>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { enrollForm, addOrder } from '@/service/api/speed'
	import { cityEnrollForm,cityAddOrder } from '@/service/api/city'
	import tools from '@/utils/tools';
	const Info = reactive({
		name: '',
		sex: '',
		codeType: '',
		code: '',
		mobile: ''
	})
	const selectList = ref([]) as any
	const selectIndex = ref(0)
	const selectShow = ref(false)
	const pickerShow = ref(false)
	const pickerParams = reactive({
		year: true,
		month: true,
		day: true,
		hour: false,
		minute: false,
		second: false
	})
	const InfoArr = ref([]) as any
	const pickerIndex = ref<number>(0)
	const param = reactive({
		id: "",
		form: [],
		type: 0
	})
	const price = ref('')
	const rules = reactive({
		name: [
			{ require: true, message: '请输入姓名', trigger: 'change' }
		]
	})
	onLoad((options : any) => {
		param.id = options.id;
		if (options.type) {
			param.type = options.type;
		}
		console.log(options.id);
		getData()
	})
	//报名
	const submit = async () => {
		param.form = InfoArr.value;
		//七天速成
		if (param.type == 0) {
			const res = await addOrder(param);
			if (res.code == 1) {
				tools.showToast('报名成功');
				tools.navTo('/pagesB/order/pay?id=' + res.msg + '&type=1',4);
			}
		}else{
			//城市巡回
			const res = await cityAddOrder(param);
			if (res.code == 1) {
				tools.showToast('报名成功');
				tools.navTo('/pagesB/order/pay?id=' + res.msg + '&type=2',4);
			}
		}

 
	}
	const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
	const getData = async () => {
		if (param.type == 0) {
			//七天速成
			const res = await enrollForm(param);
			InfoArr.value = res.msg.form;

			price.value = res.msg.price;
		} else {
			//城市巡回
			getCityData()
		}


	}
	const getCityData = async () => {
		const res = await cityEnrollForm(param);
		InfoArr.value = res.msg.form;
		InfoArr.value.forEach((item : any) => {
			if (item.type == 7) {
				console.log(item);
			}
		})
		price.value = res.msg.price;
	}
	//多选框
	const checkboxGroupChange = (value : any, index : number) => {
		InfoArr.value[index].value = value;
	}
	//单选
	const radioGroupChange = (name : string, index : number) => {
		console.log(name);
		console.log(InfoArr.value[index]);
	}
	//下拉框
	const clickSelect = (item:any,index:number)=>{
		selectShow.value = true;
		selectList.value = item.child;
		selectIndex.value = index;
	}
	//日期选择
	const clickPicker = (index : number) => {
		//console.log(index);
		pickerIndex.value = index;
		pickerShow.value = true;
	}
	//下拉框选择
	const selectConfirm = (val:any)=>{
		selectShow.value = false;
		InfoArr.value[selectIndex.value].value = val[0].value;
	}
	//日期选择
	const pickerConfirm = (date : any) => {
		InfoArr.value[pickerIndex.value].value = date.year + '-' + date.month + '-' + date.day

	}
	//上传
	const upload = async (index : number) => {
		// 	let url = await tools.chooseImage(); 
		// 	let a = await tools.ossUpload(url,'123');
		tools.chooseImage().then((res : string[]) => {
			tools.getOssUrl<string[]>(res).then((url : any) => {
				InfoArr.value[index].value = url;
				console.log(InfoArr.value[index]);
				// tools.showToast(`最多上传${i.limit ?? 1}张图片`)
			})
		})

	}
	//阅读须知
	const checkboxChange = (val : any) => {
		// InfoArr.value[index].value = val;
		// console.log(val);
		// console.log(InfoArr.value[index].value);
		// InfoArr.value.forEach((item:any)=>{
		// 	if(item.type == 3){

		// 	}
		// })

	}
</script>

<style scoped lang="scss">
	.page {
		min-height: calc(100vh - 68px);
		background-color: #F8F8F9;
		overflow: hidden;
		padding: 20rpx 30rpx;

	}

	.btn {
		display: flex;
		align-items: center;
		height: 100rpx;
		z-index: 10;
		background-color: white;

		.btn-left {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			height: 100rpx;
			padding-left: 30rpx;
		}

		.btn-right {
			background: linear-gradient(90deg, #5062A7 0%, #354678 100%);
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			margin-left: 30rpx;
			font-size: 32rpx;
		}
	}

	.upload-item {
		width: 140rpx;
		height: 140rpx;
		border-radius: 6rpx;
		border: 1px solid #ddd;
		background-color: #fcfcfc;
		margin-right: 15rpx;
		margin-bottom: 10rpx;
		position: relative;

		&:nth-child(3n) {
			margin-right: 0;
		}

		image {
			border-radius: 6rpx;
		}

		.close {
			right: 0;
			top: 0;
			width: 36rpx;
			height: 36rpx;
			position: absolute;
		}

		.add {
			width: 52rpx;
			height: 52rpx;
		}
	}
</style>